{% extends 'base.html' %}
{% block title %}
    <title>资源创建</title>
{% endblock %}
{% block customcss %}
    <style>
    .status-this{border:1px solid #2F4056;border-radius: 4px;background-color: #2F4056;color: #fff!important;}
    .create-resource-btn{float: right}
    .model-box{display: none}
    .ziyuan-table-list{    padding: 9px;}
    .dir-search{    /*box-shadow: 0px 0px 5px black;*/height: 600px;padding-top: 0px!important;}
    .resource_ma`nage{background-color: #fff;    height: 600px;}
    .layui-card-header-this{border-bottom: 4px solid #5FB878;}
    .td_hide{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
    .tabs-ul{height:40px}
    .layui-container {width: 1344px!important;}
    #tabs-header-dir{}
    .chc-form-label{width: 112px!important;}
    .chc-input-block{margin-left: 142px!important;}
    </style>
    <link rel="stylesheet" href="/static/ztree/css/bootstrapStyle/bootstrapStyle.css" type="text/css">
    <link rel="stylesheet" href="/static/css/spop.min.css" type="text/css">
{% endblock %}
{% block content %}
  <div class="layui-row layui-col-space30">
    <div class="layui-col-md12 resource_manage" >
        <!--
        <div class="layui-row">
            <div class="layui-col-md6">
                <span>状态：</span>
                <span class="layui-breadcrumb" lay-separator="|">
                  <a href="#" class="status-this"  values="0" onclick="filter_resource_type(this);">全部</a>
                  <a href="#" values="1" onclick="filter_resource_type(this);" >公开</a>
                  <a href="#" values="2" onclick="filter_resource_type(this);">授权</a>
                </span>
            </div><br><br>
            <div class="layui-col-md6">

            </div>
        </div>
        -->
      <div class="grid-demo">
        <div class="demoTablet" id="searchtable">
          搜索资源名称：
          <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off">
          </div>
          <button class="layui-btn" data-type="reload">搜索</button>
          <button  class="layui-btn layui-btn-normal create-resource-btn" >上传FTP资源</button>
        </div>
        <table class="layui-table" lay-data="{ height:500, url:'/resource/ftplist/', page:true, id:'idTest'}" lay-filter="demo" id="idsssss">
          <thead>
            <tr>
              <th lay-data="{field:'id', width:'6%', fixed: true}">id</th>
              <th lay-data="{field:'resource_name', width:'15%'}">资源名称</th>
              <th lay-data="{field:'filename', width:'15%'}">文件名称</th>
              <th lay-data="{field:'ftp_name', width:'10%'}">数据ftp服务器</th>
              <th lay-data="{field:'r_status', width:'7%'}">公开状态</th>
              <th lay-data="{field:'rtype', width:'10%'}">资源目录</th>
              <th lay-data="{field:'addtimes', width:'15%'}">创建时间</th>
              <th lay-data="{field:'updatetime', width:'18%'}">修改时间</th>
              <th lay-data="{fixed: 'right', width:'11%', align:'center', toolbar: '#barDemo'}">操作</th>
            </tr>

          </thead>
        </table>
        <script type="text/html" id="barDemo">
          <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
        </script>

      </div>
    </div>
  </div>
    <!--数据库表描述模态框-->
    <div class="model-box" id="model-box">
            <div class="layui-row" style="    padding: 20px;">
                <form class="layui-form" action="" onsubmit="return false">
                    <span style="display: none;" id="ftpidflag"></span>
                  <div class="layui-form-item">
                    <label class="layui-form-label chc-form-label">FTP资源名称</label>
                    <div class="layui-input-block chc-input-block">
                      <input type="text" name="ftpname" lay-verify="title" autocomplete="off" placeholder="请输入FTP资源名称" class="layui-input" id="ftpname">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label chc-form-label">FTP地址</label>
                    <div class="layui-input-block chc-input-block">
                      <select name="ftpaddress" lay-filter="aihao" id="ftpaddress">
                        <option value=""></option>
                          {% for i in ftphostlist %}
                        <option value="{{ i.ftp_id }}">{{ i.ftp_ip }}</option>
                          {% endfor %}
                      </select>
                    </div>
                  </div>
                  <div class="layui-form-item ">
                    <label class="layui-form-label chc-form-label" >目录分类</label>
                    <div class="layui-input-inline ">
                      <select name="selectdirOne" id="selectdirOne" lay-filter="selectdirOne">
                      </select>
                    </div>
                    <div class="layui-input-inline">
                      <select name="selectdirTwo" id="selectdirTwo" lay-filter="selectdirTwo">
                        <option value="">请选择二级目录</option>
                      </select>
                    </div>
                    <div class="layui-input-inline">
                      <select name="selectdirThree" id="selectdirThree" >
                        <option value="">请选择三级目录</option>
                      </select>
                    </div>
                  </div>

                    <div class="layui-from-item" style="padding-top: 3px;padding-bottom: 6px;">
                    <label class="layui-form-label chc-form-label">选择上传文件</label>
                    <div class="layui-input-block chc-input-block">
                        <button type="button" class="layui-btn" id="test3" name="ftpfilename" lay-filter="upload_filter" {% if not ftphostlist %}disabled{% endif %}><i class="layui-icon"></i>上传文件</button>
                        {% if not ftphostlist %}<span  >没有添加ftp服务器源，去<a href="/data_source/ftp_source/" style="color: red;font-size: 20px">添加</a></span>{% endif %}
                        <button class="layui-btn" id="upload_success_flag" style="display: none">已经上传成功</button>
                        <span id="upload_file_name" style="display: none;" class="layui-badge layui-bg-green"></span>
                    </div>


                    </div>

                  <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label chc-form-label">资源说明</label>
                    <div class="layui-input-block chc-input-block">
                      <textarea placeholder="请输入内容" class="layui-textarea" name="ftpdesc" id="ftpdesc"></textarea>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label chc-form-label">资源性质</label>
                    <div class="layui-input-block chc-input-block">
                      <input type="radio" name="resource_status" value="0" title="需授权" checked id="resource_status" >
                      <input type="radio" name="resource_status" value="1" title="公开" id="resource_status">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button class="layui-btn" lay-submit="" lay-filter="submitFtpResource">保存</button>
                      <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                    </div>
                  </div>
               </form>
            </div>

    </div>
{% endblock %}

{% block customjs %}
    <script type="text/javascript" src="/static/ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/static/mymod/spop.js"></script>
<script>
layui.use(['form', 'table','upload'], function(){
  var table = layui.table,upload = layui.upload;
  form = layui.form;
  form.render();
  $=layui.$;
  //监听表格复选框选择
  table.on('checkbox(editdesc)', function(obj){
    console.log(obj)
  });

  //自定义验证规则
  form.verify({
    name: function(value){
      if(value.length < 3){
        return '请输入资源名称';
      }
    }
    ,desc: function(value){
      if(value.length < 3){
        return '请输入资源描述信息';
      }
    }
  });

  //指定允许上传的文件类型
  upload.render({
    elem: '#test3'
    ,url: '/resource/upload/file/'
    ,before:function (obj) {
          var resource_cate=$("#ftpaddress").val();
          console.log(resource_cate)
          if(!resource_cate){
                        spop({
                            template: '<h4 class="spop-title">错误</h4>必须要选择ftp服务器！！',
                            autoclose: 3000,style:"error"
                        });
          }
          this.data={chc_ftp_address:resource_cate}
      }
    ,accept: 'file' //普通文件
    ,done: function(res){
      if(res.code==0){
                        spop({
                            template: '<h4 class="spop-title">成功</h4>文件上传成功！！',
                            autoclose: 3000,style:"success"
                        });
                        upload_file_url=res.data;
                        $("#test3").css("display","none");
                        $("#upload_success_flag").css("display","block").text(res.data+'上传成功');
      }
      else{
                        spop({
                            template: '<h4 class="spop-title">错误</h4>'+res.msg,
                            autoclose: 3000,style:"error "
                        });
                        upload_file_url=res.data;
      }
      console.log(">>>>>>>>>>>>")
      setTimeout(2000,function () {
          window.location.reload();
      })
    }
  });
  //监听工具条
  table.on('tool(demo)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
      layer.msg('ID：'+ data.id + ' 的查看操作');
    } else if(obj.event === 'del'){
      layer.confirm('真的删除吗?',{btn: ['确定', '取消'],},function (index,layero) {
            var jsondata={"resource_id":data.id};
            $.ajax({
                url:"/resource/ftplist/",
                type:"DELETE",
                data:jsondata,
                dataType:'json',
                success:function (data) {
                    if(data.code==0){
                        spop({
                            template: '<h4 class="spop-title">成功</h4>删除成功！！',
                            autoclose: 3000,style:"success"
                        });
                        setTimeout(function () {window.location.reload()},2000)
                    }else{
                        spop({
                            template: '<h4 class="spop-title">成功</h4>删除错误！！',
                            autoclose: 3000,style:"error"
                        });
                    }
                }

            })
             layer.close(index);
          },function (index) {//cancel
            layer.close(index);
          }
      );
    } else if(obj.event === 'edit'){
        var resourceid=data.id;
        $.getJSON("/resource/ftpresource/"+resourceid,function (data) {
                if(data.code==0){
                    // 为更新表字段做埋点
                    $("#ftpname").val(data.data.ftpname);
                    $("#ftpaddress").val(data.data.ftpaddress);
                    {#$("#selectdirOne").val(data.cateid.one);#}
                    {#$("#selectdirTwo").val(data.cateid.two);#}
                    {#$("#selectdirThree").append('<option value="'+data.cateid.three+'" selected>'+data.cateid.threename+'</option>')#}
                    $("#ftpidflag").text(data.data.fid);
                    $("#ftpdesc").val(data.data.desc);
                    $("#test3").css("display","none");
                    upload_file_url=data.data.upload_file_url;
                    $("#upload_file_name").text(data.data.filename).css("display","block");
                    $('[name=resource_status]').each(function(i,item){
                        if($(item).val()==data.data.resource_status){
                            $(item).prop('checked',true);

                        }else {
                            $(item).attr('checked',true);
                        }
                        form.render();
                    });

                    form.render('select');
                }
        });
        layer_index_one =layer.open({
          title:"编辑资源内容",
          type: 1,
          shade:false,
          skin: 'layui-layer-rim', //加上边框
          area: ['850px', '550px'], //宽高
          content: $("#model-box"),
        });
    }
  });
  //监听提交
  form.on('submit(submitFtpResource)', function(data){
      console.log(data.field);
      if(!data.field.selectdirThree){
          layer.msg("必须要选择到三级目录，如果没有，去创建");
          return
      }
      if(data.field.selectdirThree){
          var selectdir=data.field.selectdirThree
      }else if(!data.field.selectdirThree&&data.field.selectdirTwo){
          var selectdir=data.field.selectdirTwo
      }else{
          layer.msg("请选择到三级目录");
          return
      }
      data.field['selectdir']=selectdir;
      data.field['fileurl']=upload_file_url;
      isupdate=$("#upload_file_name").text();
        if(isupdate){
            data.field['fid']=$("#ftpidflag").text();
        }
      $.ajax({
          url:"/resource/file/list/",
          type:"POST",
          data:data.field,
          dataType:"json",
          success:function (result) {
              console.log(result);
              if(result.code==0){
                        spop({
                            template: '<h4 class="spop-title">成功</h4>文件添加成功！！',
                            autoclose: 3000,style:"success"
                        });
                        layer.close(layer_index_one);
              }else {
                        spop({
                            template: '<h4 class="spop-title">错误</h4>'+result.msg,
                            autoclose: 3000,style:"error "
                        });
              }

          }
      });


      setTimeout(function () {
          window.location.reload();
      },2000);
    return false;
  });


  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });

    active = {
    reload: function(){
      var demoReload = $('#demoReload');

      //执行重载
      table.reload('idTest', {
         url: '/resource/ftplist/'
        ,page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          key:  demoReload.val()
        }
      });
    }
  };

  $('#searchtable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });


//创建操作
$(".create-resource-btn").on("click",function () {
    layer_index_one = layer.open({
      title:"上传FTP资源",
      type: 1,
      shade:false,
      skin: 'layui-layer-rim', //加上边框
      area: ['850px', '550px'], //宽高
      content: $("#model-box"),
    });
});
   $(document).ready(function(){
       $.getJSON("/mulu/catalog/?user_id={{ userid }}",function (data) {
                    if(data.code==0){
                        $.each(data.data,function (i,item) {
                            if(item.parent_id==null){
                                 parentid=item.id;
                                $("#selectdirOne").append('<option value="'+item.id+'">'+item.name+'</option>');
                            }

                        });
                        $.each(data.data,function (i,item) {
                            if(item.parent_id==parentid){
                                $("#selectdirTwo").append('<option value="'+item.id+'">'+item.name+'</option>');
                            }

                        });
                            form.render('select');
                    }else{
                        spop({
                            template: '<h4 class="spop-title">Error</h4>目录获取错误！！',
                            autoclose: 3000,style:"error"
                        });
                    }
       })

   });
   //级联分类菜单
   form.on("select(selectdirTwo)",function (data) {
       var catetwo=data.value;
         $.ajax({
                type: 'get',
                url: '/mulu/cate/'+catetwo,
                dataType:  'json',
                success: function(data){
                    $("#selectdirThree").empty();
                  $.each(data.data, function(key, val) {
                            $("#selectdirThree").append('<option value="'+val.id+'">'+val.name+'</option>');
                        });
                  form.render('select');
                }
                });
       })
   form.on("select(selectdirOne)",function (data) {
       var cateone=data.value;
         $.ajax({
                type: 'get',
                url: '/mulu/cate/'+cateone,
                dataType:  'json',
                success: function(data){
                    $("#selectdirTwo").empty();
                  $.each(data.data, function(key, val) {
                            $("#selectdirTwo").append('<option value="'+val.id+'">'+val.name+'</option>');
                        });
                  form.render('select');
                }
                });
       })

});


</script>
<SCRIPT LANGUAGE="JavaScript">

//按照状态进行切换
function filter_resource_type(em){
    layui.use(['form', 'table'], function() {
        var table = layui.table;
    active = {
    reload: function(){
      var resource_status = $(em).attr('values');
      //执行重载
      table.reload("idTest",{
         url: '/resource/list/'
        ,page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          resource_status:  resource_status
        }
      });
    }
  };
    var type = "reload";
    active[type] ? active[type].call(this) : '';

    $(em).siblings().removeClass("status-this");
    $(em).addClass("status-this");
    });

    return false
}
  </SCRIPT>
{% endblock %}